<template>
  <view class="menu-item" @click="onClick">
    <text :class="['iconfont', item.icon]" :style="{ color: item.color }"></text>
    <text class="title">{{ item.title }}</text>
    <text class="count" v-if="item.count !== undefined">{{ item.count }}</text>
    <text class="arrow">></text>
  </view>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: Object
  },
  methods: {
    onClick() {
      this.$emit('click', this.item)
    }
  }
}
</script>

<style scoped>
.menu-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.iconfont {
  font-size: 40rpx;
  margin-right: 24rpx;
}

.title {
  flex: 1;
  font-size: 30rpx;
}

.count {
  color: #f5b800;
  font-size: 28rpx;
  margin-right: 16rpx;
}

.arrow {
  color: #ccc;
  font-size: 32rpx;
}
</style>